<%
  scope[:password_class] ||= 'password'
%>
<div class="form_item_block">
  <label>Password</label>
  <%= scope[:form].hidden_field(com.thoughtworks.go.config.materials.ScmMaterialConfig::ENCRYPTED_PASSWORD, {:class => "form_input encrypted_password"}) -%>
  <div class="password_field">
    <%= scope[:form].password_field(com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD, {:class => "form_input #{scope[:password_class]}", :autocomplete => "off"}) -%>
    <%= error_message_on(scope[:form].object, com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD, :css_class => "form_error") %>
    <%= scope[:form].label("", "", {:class => 'password_display_toggle hide_password'}) %>
  </div>
  <div class="hidden">
    <%= scope[:form].check_box(com.thoughtworks.go.config.materials.ScmMaterialConfig::PASSWORD_CHANGED, {:class => "form_input password_changed", :value => "1", :checked => true, :include_hidden => false}) -%>
  </div>
</div>

<script type="text/javascript">
  var checkbox = jQuery(".password_display_toggle");

  function toggleDisplay(sender, id) {
    var passwordField = jQuery("#" + id + "password");
    var displayToggle = jQuery(sender);
    if (displayToggle.hasClass("hide_password")) {
      passwordField.get(0).setAttribute('type', 'text');
      displayToggle.removeClass("hide_password");
      displayToggle.addClass("show_password");
    } else {
      passwordField.get(0).setAttribute('type', 'password');
      displayToggle.removeClass("show_password");
      displayToggle.addClass("hide_password");
    }
  }

  checkbox.each(function () {
    var jQueryObject = jQuery(this);
    var listener     = jQueryObject.data("events");
    if (listener === undefined || listener.length < 1) {
      jQueryObject.click(function () {
        toggleDisplay(this, this.readAttribute('for'));
      });
    }
  });
</script>
